<template>
  <Page class="bg-[#f5f5f5] text-[#333] leading-[1.5]">
    <view class="container max-w-[750rpx] mx-auto px-[30rpx]">
      <view class="header text-center mb-[40rpx]">
        <text class="block text-[40rpx] font-bold text-[#333] mb-[20rpx]">商家入驻平台</text>
        <text class="text-[24rpx] text-[#666]">加入我们，共创商业价值</text>
      </view>
      
      <nut-button 
        class="btn w-full py-[30rpx] bg-[#ff6b00] text-white border-none rounded-[10rpx] text-[32rpx] my-[40rpx]"
        @click="showForm = true"
        v-if="!showForm"
      >
        成为平台商家
      </nut-button>
      
      <view v-if="showForm">
        <!-- 商家类型选择 -->
        <view class="form-group bg-white rounded-[10rpx] p-[30rpx] mb-[30rpx]">
          <text class="block text-[32rpx] font-bold mb-[20rpx] text-[#333]">选择商家类型</text>
          <view class="radio-group">
            <view 
              v-for="(type, index) in merchantTypes" 
              :key="index"
              class="radio-item flex items-center mb-[15rpx]"
            >
              <nut-radio 
                :name="type.value" 
                v-model="selectedType"
                :id="'type' + index"
                class="mr-[10rpx]"
              ></nut-radio>
              <label :for="'type' + index" class="text-[#666]">{{ type.label }}</label>
            </view>
          </view>
        </view>
        
        <!-- 基本信息 -->
        <view class="form-group bg-white rounded-[10rpx] p-[30rpx] mb-[30rpx]">
          <text class="block text-[32rpx] font-bold mb-[20rpx] text-[#333]">基本信息</text>
          
          <view class="form-item mb-[20rpx]">
            <label for="companyName" class="block mb-[15rpx] text-[#666]">公司/机构名称</label>
            <nut-input 
              id="companyName"
              class="w-full px-[20rpx] py-[20rpx] border border-[#ddd] rounded-[8rpx] text-[28rpx]"
              placeholder="请输入公司或机构全称"
              v-model="formData.companyName"
            ></nut-input>
          </view>
          
          <view class="form-item mb-[20rpx]">
            <label for="industry" class="block mb-[15rpx] text-[#666]">所属行业</label>
            <nut-picker
              v-model="formData.industry"
              :columns="industryOptions"
              title="请选择行业"
              @confirm="onPickerConfirm"
              @cancel="onPickerCancel"
            >
              <nut-input 
                id="industry"
                readonly
                class="w-full px-[20rpx] py-[20rpx] border border-[#ddd] rounded-[8rpx] text-[28rpx]"
              ></nut-input>
            </nut-picker>
          </view>
          
          <view class="form-item mb-[20rpx]">
            <label for="serviceScope" class="block mb-[15rpx] text-[#666]">服务范围</label>
            <nut-textarea 
              id="serviceScope"
              class="w-full px-[20rpx] py-[20rpx] border border-[#ddd] rounded-[8rpx] text-[28rpx]"
              rows="3"
              placeholder="请详细描述您的服务范围"
              v-model="formData.serviceScope"
            ></nut-textarea>
          </view>
        </view>
        
        <!-- 资质证明 -->
        <view class="form-group bg-white rounded-[10rpx] p-[30rpx] mb-[30rpx]">
          <text class="block text-[32rpx] font-bold mb-[20rpx] text-[#333]">资质证明</text>
          
          <view class="form-item mb-[20rpx]">
            <label class="block mb-[15rpx] text-[#666]">营业执照</label>
            <view 
              class="upload-area border-2 border-dashed border-[#ddd] p-[40rpx] text-center rounded-[8rpx] my-[20rpx] bg-[#fafafa]"
              @click="handleUpload('businessLicense')"
            >
              <view class="upload-icon text-[60rpx] text-[#ccc] mb-[10rpx]">+</view>
              <text class="text-[24rpx] text-[#999]">点击上传营业执照照片</text>
            </view>
          </view>
          
          <view class="form-item">
            <label class="block mb-[15rpx] text-[#666]">其他资质文件（可选）</label>
            <view 
              class="upload-area border-2 border-dashed border-[#ddd] p-[40rpx] text-center rounded-[8rpx] my-[20rpx] bg-[#fafafa]"
              @click="handleUpload('otherDocuments')"
            >
              <view class="upload-icon text-[60rpx] text-[#ccc] mb-[10rpx]">+</view>
              <text class="text-[24rpx] text-[#999]">点击上传其他资质文件</text>
            </view>
          </view>
        </view>
        
        <!-- 押金信息 -->
        <view class="form-group bg-white rounded-[10rpx] p-[30rpx] mb-[30rpx]">
          <text class="block text-[32rpx] font-bold mb-[20rpx] text-[#333]">押金信息</text>
          
          <view class="deposit-info bg-[#fff8e6] p-[20rpx] rounded-[8rpx] my-[20rpx] text-[24rpx] text-[#ff6b00]">
            根据您选择的商家类型，需要缴纳相应押金。审核不通过将原路退回。
          </view>
          
          <view class="form-item">
            <label for="depositAmount" class="block mb-[15rpx] text-[#666]">押金金额</label>
            <nut-input 
              id="depositAmount"
              class="w-full px-[20rpx] py-[20rpx] border border-[#ddd] rounded-[8rpx] text-[28rpx]"
              placeholder="系统自动计算"
              :value="depositAmount"
              readonly
            ></nut-input>
          </view>
        </view>
        
        <!-- 协议同意 -->
        <view class="rules text-[24rpx] text-[#999] my-[30rpx]">
          <nut-checkbox v-model="agreeRules" class="mr-[10rpx]">
            <text>我已阅读并同意</text>
            <text class="text-[#ff6b00]">《平台商家入驻协议》</text>
            <text>和</text>
            <text class="text-[#ff6b00]">《押金管理规定》</text>
          </nut-checkbox>
        </view>
        
        <!-- 操作按钮 -->
        <nut-button 
          class="btn w-full py-[30rpx] bg-[#ff6b00] text-white border-none rounded-[10rpx] text-[32rpx] mb-[20rpx]"
          @click="submitForm"
        >
          提交审核
        </nut-button>
        
        <nut-button 
          class="btn w-full py-[30rpx] bg-[#f5f5f5] text-[#ff6b00] border border-[#ff6b00] rounded-[10rpx] text-[32rpx]"
          @click="showForm = false"
        >
          取消
        </nut-button>
      </view>
    </view>
  </Page>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Taro } from '@tarojs/taro'
import { Button as nutButton, Input as nutInput, Textarea as nutTextarea, 
         Checkbox as nutCheckbox, Radio as nutRadio, Picker as nutPicker } from '@nutui/nutui-taro'
import { IconFont } from '@nutui/icons-vue-taro'

// 表单显示状态
const showForm = ref(false)

// 商家类型数据
const merchantTypes = [
  { label: '服务商', value: 'service' },
  { label: '培训商', value: 'training' },
  { label: '传承商', value: 'heritage' },
  { label: '供应商', value: 'supplier' }
]

// 行业选项
const industryOptions = [
  { label: '教育培训', value: 'education' },
  { label: '文化传承', value: 'culture' },
  { label: '技术服务', value: 'tech' },
  { label: '零售供应', value: 'retail' },
  { label: '其他', value: 'other' }
]

// 表单数据
const formData = ref({
  merchantType: '',
  companyName: '',
  industry: '',
  serviceScope: '',
  businessLicense: '',
  otherDocuments: ''
})

// 选中的商家类型
const selectedType = ref('')

// 押金金额计算
const depositAmount = computed(() => {
  const depositMap = {
    'service': '¥5000',
    'training': '¥8000',
    'heritage': '¥3000',
    'supplier': '¥10000'
  }
  return depositMap[selectedType.value] || ''
})

// 协议同意状态
const agreeRules = ref(false)

// 处理上传
const handleUpload = (type) => {
  // 调用Taro的上传API
  Taro.chooseImage({
    count: 1,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      const tempFilePaths = res.tempFilePaths
      Taro.showToast({
        title: type === 'businessLicense' ? '营业执照上传成功' : '其他文件上传成功',
        icon: 'none',
        duration: 2000
      })
      // 实际应用中这里应该上传到服务器并保存文件路径
      formData.value[type] = tempFilePaths[0]
    }
  })
}

// 提交表单
const submitForm = () => {
  // 表单验证
  if (!selectedType.value) {
    Taro.showToast({
      title: '请选择商家类型',
      icon: 'none',
      duration: 2000
    })
    return
  }
  
  if (!formData.value.companyName) {
    Taro.showToast({
      title: '请输入公司或机构名称',
      icon: 'none',
      duration: 2000
    })
    return
  }
  
  if (!formData.value.industry) {
    Taro.showToast({
      title: '请选择所属行业',
      icon: 'none',
      duration: 2000
    })
    return
  }
  
  if (!formData.value.serviceScope) {
    Taro.showToast({
      title: '请描述服务范围',
      icon: 'none',
      duration: 2000
    })
    return
  }
  
  if (!formData.value.businessLicense) {
    Taro.showToast({
      title: '请上传营业执照',
      icon: 'none',
      duration: 2000
    })
    return
  }
  
  if (!agreeRules.value) {
    Taro.showToast({
      title: '请阅读并同意平台协议',
      icon: 'none',
      duration: 2000
    })
    return
  }
  
  // 模拟提交成功
  Taro.showLoading({ title: '提交中...' })
  
  setTimeout(() => {
    Taro.hideLoading()
    Taro.showToast({
      title: '您的入驻申请已提交，我们将尽快审核！',
      icon: 'none',
      duration: 2000
    })
    
    // 重置表单并隐藏
    formData.value = {
      merchantType: '',
      companyName: '',
      industry: '',
      serviceScope: '',
      businessLicense: '',
      otherDocuments: ''
    }
    selectedType.value = ''
    agreeRules.value = false
    showForm.value = false
  }, 1500)
}
</script>